<template>
  <div class="com-modal" _touchstart.self="disabledPropagation" @click.self="clickSelfHandel">
    <slot></slot>
  </div>
</template>
<script>
export default {
  mounted(){
    // window.addEventListener('scroll',this.scrollHandle,true)
    // document.addEventListener('DOMMouseScroll', this.scrollHandle, false);
    // document.addEventListener('mousewheel',this.scrollHandle,false);
  },
  destroyed(){
    // window.removeEventListener('scroll',this.scrollHandle,true)
    document.removeEventListener('DOMMouseScroll',this.scrollHandle,false);
    document.removeEventListener('mousewheel',this.scrollHandle,false);
  },
  methods:{
    scrollHandle(e){//禁止鼠标滚动
      e.preventDefault();
      e.stopPropagation();
      return false;
    },
    clickSelfHandel(){
      this.$emit('close');
    },
    disabledPropagation(e){
      e.stopPropagation();
      e.preventDefault();
    }
  }
}
</script>
<style lang="less" scoped>
.com-modal {
  position:fixed;
  z-index:10001;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,.5);
}
</style>

